<!--
 * @Author: weikang
 * @Description:
 * @Date: 2023-12-22 22:15:14
 * @LastEditTime: 2024-03-18 21:59:21
 * @FilePath: \env-manager-pc\src\views\dashboard\yunwei\shujuwanzheng.vue
-->
<script setup lang="ts">
import * as Echarts from 'echarts'
import useDashboardStore from '@/store/modules/dashboard'

const dashboardStore = useDashboardStore()

const option = computed(() => {
  return {
    grid: {
      left: 0,
      right: '5%',
      bottom: 0,
      top: 40,
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis', // axis , item
    // backgroundColor: 'RGBA(0, 49, 85, 1)',
    // borderColor: 'rgba(0, 151, 251, 1)',
    // textStyle: {
    //    color: '#BCE9FC',
    //    // fontSize: this.$fontSize(0.16),
    //    align: 'left',
    // },
    // formatter: function (params) {
    //    return params[0].name + '<br/>' + params[0].seriesName + ' : ' + params[0].value;
    // },
    },
    xAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: 'rgba(77, 128, 254, 0.2)',
          type: 'line',
        },
      },
      axisTick: {
        show: true,
      },

      axisLabel: {
      //  改变x轴字体颜色和大小
        show: true,
        textStyle: {
          color: '#00c0fa',
          fontSize: 16,
        },
      },
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        name: '单位：%',
        nameLocation: 'start',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#2a77ea',
            fontSize: 12,
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: dashboardStore.envDashboard?.OwnerOrgs?.map((item: any) => item.OwnerOrgName),
      },
    ],
    series: [
      {
        type: 'bar',
        zlevel: 1,
        label: {
          show: true,
          position: 'right', // 位置
          color: '#00c0fa',
          fontSize: 12,
          distance: 10, // 距离
        // formatter: '{c}%' // 这里是数据展示的时候显示的数据
        }, // 柱子上方的数值
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: new Echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: '#2a77ea',
              },
              {
                offset: 1,
                color: '#00c0fa',
              },
            ]),
          },
        },
        barWidth: 20,
        data: dashboardStore.envDashboard?.OwnerOrgs?.map((item: any) => item.CollectActualRatio * 100),
      },
    ],
  }
})

const chartRef = ref<any>()
let chart: any = null
onMounted(() => {
  chart = Echarts.init(chartRef.value)
  chart.setOption(option.value)
  window.addEventListener('resize', () => {
    chart.resize()
  })
})

dashboardStore.$subscribe((mutation, state) => {
  if (state.envDashboard?.OwnerOrgs) {
    chart.setOption(option.value)
  }
})
</script>

<template>
  <PageMain title="数据完整排名">
    <div ref="chartRef" class="h-[30vh] min-h-[300px] w-full overflow-hidden" />
  </PageMain>
</template>
